<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/7
  Time: 15:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<jsp:include page="include-head.jsp"></jsp:include>

<script type="text/javascript">
    $(function () {
        // 1.点击移动按钮，绑定点击事件
        // 2.点击向右移动，把选中的元素移到右边的select框里面
        // select 是标签选择器
        // :eq(0)表示选择页面上的第一个
        // :eq(1)表示选择页面上的第二个
        // “>”表示选择子元素
        // :selected 表示选择“被选中的”option
        // appendTo()能够将jQuery 对象追加到指定的位置
        $("#rightBtn").click(function () {
            $("select:eq(0)>option:selected").appendTo("select:eq(1)");
        })

        // 3.点击向左移动，把选中的元素移到左边的select框里面
        $("#leftBtn").click(function () {
            $("select:eq(1)>option:selected").appendTo("select:eq(0)");
        })

        // 因为这是个select框，所有其实点击提交的时候，只会提交选中的数据
        // 所以，我们提交的时候，一定要把右边的select框的数据全选中，不然数据就会缺失
        $("#submitBtn").click(function () {
            $("select:eq(1)>option").prop("selected","selected");
        })
    })


</script>

<body>
<jsp:include page="include-nav.jsp"></jsp:include>


<div class="container-fluid">
    <div class="row">
        <jsp:include page="include-sidebar.jsp"></jsp:include>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">数据列表</a></li>
                <li class="active">分配角色</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form action="assign/do/role/assign.html" method="post" role="form" class="form-inline">
                        <input name="pageNum" type="hidden" value="${param.pageNum}"/>
                        <input name="keyword" type="hidden" value="${param.keyword}"/>
                        <input name="adminId" type="hidden" value="${param.adminId}"/>
                        <div class="form-group">
                            <label for="unAssignedRoleList">未分配角色列表</label><br>
                            <select id="unAssignedRoleList" class="form-control" multiple="multiple" size="10" style="width:100px;overflow-y:auto;">
                                <c:forEach items="${requestScope.unAssignedRoleList}" var="role">
                                    <option value="${role.id}">${role.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li id="rightBtn" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                                <br>
                                <li id="leftBtn" class="btn btn-default glyphicon glyphicon-chevron-left" style="margin-top:20px;"></li>
                            </ul>
                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <label for="assignedRoleList">已分配角色列表</label><br>
                            <select id="assignedRoleList" name="assignedRoleList" class="form-control" multiple="multiple" size="10" style="width:100px;overflow-y:auto;">
                                <c:forEach items="${requestScope.assignedRoleList}" var="role">
                                    <option value="${role.id}">${role.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div>
                            <button id="submitBtn" style="width: 150px" class="btn btn-lg btn-success btn-block" type="submit">提交</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>
